<!--
 * hi-loading - 加载
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="hi-loading" :class="_classes" :style="_styles" @tap="_emits('click')">
        <!-- 图标 -->
        <hi-icon class="hi-loading__icon" :name="icon" v-if="icon"></hi-icon>

        <!-- 文字 -->
        <text class="hi-loading__text" v-if="text">{{ text }}</text>
    </view>
</template>

<!-- 由于 HbuilderX 不支持 defineOptions() 写法，故只能在此处进行配置 -->
<script>
    export default { options: uni?.$hi?.config?.componentsOptions || {} };
</script>

<script setup>
    import { computed } from "vue";
    import props from "./props.js";

    // 组件属性
    const _props = defineProps(props);

    // emits
    const _emits = defineEmits(["click"]);

    // 组件类名
    const _classes = computed(() => {
        const classes = [];

        // 纵向
        if (_props.vertical) classes.push("hi-loading--vertical");

        return classes;
    });

    // 组件样式
    const _styles = computed(() => {
        const styles = [];

        // 文字颜色
        if (_props.color) styles.push(`--hi-loading-color: ${_props.color}`);

        // 文字大小
        if (_props.fontSize) styles.push(`--hi-loading-font-size: ${_props.fontSize}`);

        return styles;
    });
</script>

<style lang="scss" scoped>
    .hi-loading {
        color: var(--hi-loading-color, inherit);
        font-size: var(--hi-loading-font-size, 0.8em);
        display: var(--hi-loading-display, inline-flex);
        flex-direction: var(--hi-loading-flex-direction, row);
        align-items: var(--hi-loading-align-items, center);
        justify-content: var(--hi-loading-justify-content, center);
        text-align: var(--hi-loading-text-aligin, center);
        gap: var(--hi-loading-gap, 5px);

        // 图标
        &__icon {
            color: var(--hi-loading-icon-color, inherit);
            font-size: var(--hi-loading-icon-font-size, 1.5em);
            animation-name: hi-animate-spin;
            animation-duration: var(--hi-loading-animation-duration, 1.5s);
            animation-iteration-count: var(--hi-loading-animation-iteration-count, infinite);
            animation-timing-function: var(--hi-loading-animation-timing-function, linear);
        }

        // 纵向布局
        &--vertical {
            flex-direction: var(--hi-loading-flex-direction, column);
        }
    }
</style>
